import React, { useEffect } from "react";
import TitleConent from "../../../TitleComponents";

import "./index.css";
import { useAppDispatch, useAppSelector } from "../../../../store";
import { getAknowledgeNav } from "../../../../store/sliceReducer/HomeSliceReducer";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate()
  const { knowledgeNav } = useAppSelector((state) => state.home);
  useEffect(() => {
    dispatch(getAknowledgeNav());
  }, [dispatch]);
  return (
    <div className="Consultation">
      {/* 子组件 */}
      <TitleConent text={"问诊咨询"} />
      <div className="menu_box bz">
        {knowledgeNav &&
          knowledgeNav.map((v:any) => {
            return (
              <div className="menu" key={v.id} onClick={()=>navigate('/Aconsultation')}>
                <img  src={v.pic} alt="" />
                <span>{v.departmentName}</span>
              </div>
            );
          })}

      </div>
    </div>
  );
};

export default Index;
